<template>
  <el-drawer
    :append-to-body="true"
    class="small"
    size="80%"
    direction="rtl"
    v-bind="$attrs"
    @close="close"
  >
    <template #header>
      <slot name="header"></slot>
    </template>
    <template #default>
      <slot></slot>
    </template>

    <template #footer v-if="!props.noFooter">
      <slot name="footer">
        <el-row justify="end">
          <slot name="btns"></slot>

          <div>
            <el-button
              v-if="showCancel"
              size="small"
              @click="close"
              class="mr-8px"
            >
              取消
            </el-button>
            <!-- 选中数据将覆盖当前行项目。 -->
            <el-button
              type="primary"
              size="small"
              @click="confirm"
              v-if="showConfirm"
            >
              {{ confirmText || '确定' }}
            </el-button>
          </div>
        </el-row>
      </slot>
    </template>
  </el-drawer>
</template>
<script setup>
const emits = defineEmits(['close', 'confirm'])
const props = defineProps({
  noFooter: {
    type: Boolean,
    default: false
  },
  showConfirm: {
    type: Boolean,
    default: true
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  confirmText: {
    type: String,
    default: ''
  }
})
const close = () => {
  emits('close', false)
}
const confirm = () => {
  emits('confirm', false)
}
</script>
